<template>
  <view class="contact-page" :style="{background: themeColorStyles.backgroundGradient}">
    <!-- 主要内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 客服信息卡片 -->
      <view class="info-card" :style="{boxShadow: themeColorStyles.cardShadow, border: themeColorStyles.cardBorder}">
        <view class="card-header">
          <text class="card-title">在线客服</text>
          <text class="card-subtitle">为您提供专业的服务支持</text>
        </view>
        
        <view class="service-header" :style="{background: themeColorStyles.primaryColorBgLight, border: themeColorStyles.serviceHeaderBorder}">
          <image class="service-avatar" 
                 :src="getImageUrl(programConfig.aboutLogo)" 
                 mode="aspectFill" 
                 :style="{border: themeColorStyles.serviceAvatarBorder}"
                 v-if="programConfig.aboutLogo" />
          <view class="service-info">
            <text class="service-name">客服小助手</text>
          </view>
        </view>
        
        <view class="service-actions">
          <button class="action-btn primary" :style="{background: themeColorStyles.primaryColor, borderColor: themeColorStyles.primaryColor, color: themeColorStyles.primaryTextColor, boxShadow: themeColorStyles.primaryBtnShadow}" open-type="contact">
            <text class="btn-icon" :style="{color: themeColorStyles.primaryTextColor}">💬</text>
            <text class="btn-text" :style="{color: themeColorStyles.primaryTextColor}">在线咨询</text>
          </button>
          <button class="action-btn" :style="{border: themeColorStyles.actionBtnBorder, color: themeColorStyles.secondaryBtnColor, background: themeColorStyles.secondaryBtnBg, boxShadow: themeColorStyles.secondaryBtnShadow}" @click="callPhone">
            <text class="btn-icon" :style="{color: themeColorStyles.secondaryBtnColor}">📞</text>
            <text class="btn-text" :style="{color: themeColorStyles.secondaryBtnColor}">电话咨询</text>
          </button>
        </view>
      </view>
      
      <!-- 联系方式卡片 -->
      <view class="info-card" :style="{boxShadow: themeColorStyles.cardShadow, border: themeColorStyles.cardBorder}">
        <view class="card-header">
          <text class="card-title">联系方式</text>
          <text class="card-subtitle">多种方式联系我们</text>
        </view>
        
        <view class="method-item" 
              :style="{background: themeColorStyles.containerBg, border: themeColorStyles.methodItemBorder}"
              @click="copyPhone" v-if="programConfig.servicePhone">
        <view class="method-info">
          <text class="method-label">客服热线</text>
          <text class="method-value" :style="{color: themeColorStyles.primaryColor}">{{ programConfig.servicePhone }}</text>
        </view>
        <view class="method-action" :style="{background: themeColorStyles.methodActionBg, border: themeColorStyles.methodActionBorder}">
          <text class="action-text" :style="{color: themeColorStyles.primaryColor}">复制</text>
        </view>
      </view>
      
      <view class="method-item" 
            :style="{background: themeColorStyles.containerBg, border: themeColorStyles.methodItemBorder}"
            @click="copyEmail" v-if="programConfig.serviceEmail">
        <view class="method-info">
          <text class="method-label">邮箱咨询</text>
          <text class="method-value" :style="{color: themeColorStyles.primaryColor}">{{ programConfig.serviceEmail }}</text>
        </view>
        <view class="method-action" :style="{background: themeColorStyles.methodActionBg, border: themeColorStyles.methodActionBorder}">
          <text class="action-text" :style="{color: themeColorStyles.primaryColor}">复制</text>
        </view>
      </view>
      
      <view class="method-item" 
            :style="{background: themeColorStyles.containerBg, border: themeColorStyles.methodItemBorder}"
            @click="copyWechatId" v-if="programConfig.serviceWechatId">
        <view class="method-info">
          <text class="method-label">微信客服</text>
          <text class="method-value" :style="{color: themeColorStyles.primaryColor}">{{ programConfig.serviceWechatId }}</text>
        </view>
        <view class="method-action" :style="{background: themeColorStyles.methodActionBg, border: themeColorStyles.methodActionBorder}">
          <text class="action-text" :style="{color: themeColorStyles.primaryColor}">复制</text>
        </view>
      </view>
      
      <view class="method-item" 
            :style="{background: themeColorStyles.containerBg, border: themeColorStyles.methodItemBorder}"
            @click="previewWechatQr" v-if="programConfig.serviceWechatQr">
        <view class="method-info">
          <text class="method-label">微信二维码</text>
          <text class="method-value" :style="{color: themeColorStyles.primaryColor}">扫码添加客服微信</text>
        </view>
        <view class="method-action" :style="{background: themeColorStyles.methodActionBg, border: themeColorStyles.methodActionBorder}">
          <text class="action-text" :style="{color: themeColorStyles.primaryColor}">查看</text>
        </view>
      </view>
      
      <view class="method-item" 
            :style="{background: themeColorStyles.containerBg, border: themeColorStyles.methodItemBorder}"
            @click="copyQQ" v-if="programConfig.serviceQq">
        <view class="method-info">
          <text class="method-label">QQ客服</text>
          <text class="method-value" :style="{color: themeColorStyles.primaryColor}">{{ programConfig.serviceQq }}</text>
        </view>
        <view class="method-action" :style="{background: themeColorStyles.methodActionBg, border: themeColorStyles.methodActionBorder}">
          <text class="action-text" :style="{color: themeColorStyles.primaryColor}">复制</text>
        </view>
      </view>
      </view>
      
      <!-- 常见问题卡片 -->
      <view class="info-card" :style="{boxShadow: themeColorStyles.cardShadow, border: themeColorStyles.cardBorder}">
        <view class="card-header">
          <text class="card-title">常见问题</text>
          <text class="card-subtitle">快速找到您需要的答案</text>
        </view>
        
        <view class="faq-list">
          <view class="faq-item" 
                :style="{border: themeColorStyles.faqItemBorder}"
                v-for="(faq, index) in displayFaqList" :key="index" @click="toggleFaq(index)">
            <view class="faq-question">
              <text class="question-text">{{ faq.question }}</text>
              <text class="expand-icon" :style="{color: themeColorStyles.primaryColor}" :class="{ 'expanded': faq.expanded }">▼</text>
            </view>
            <view class="faq-answer" v-if="faq.expanded">
              <text class="answer-text">{{ faq.answer }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部信息卡片 -->
      <view class="info-card" v-if="programConfig.mineAdText">
        <view class="footer-info">
          <text class="footer-text" v-for="(line, index) in mineAdTextLines" :key="index">{{ line }}</text>
        </view>
      </view>
      
      <!-- 底部间距 -->
      <view class="bottom-space"></view>
    </scroll-view>
  </view>
</template>

<script>
import { getPublicProgramConfig } from '@/api/programConfig'
import { API_CONFIG } from '@/api/config.js'
import { getThemePrimaryColor, getThemeColorFromGlobal } from '@/utils/themeUtils'

export default {
  data() {
    return {
      // 小程序配置数据
      programConfig: {
        aboutLogo: '',
        servicePhone: '',
        serviceEmail: '',
        serviceWechatId: '',
        serviceQq: '',
        serviceWechatQr: '',
        serviceFaq: '',
        mineAdText: ''
      },
      // 主题色标识
      themeColor: '1',
      
      // 默认常见问题列表
      defaultFaqList: [],
      
      // 显示的FAQ列表（用于管理展开状态）
      displayFaqList: []
    };
  },
  
  async onLoad() {
    await this.initThemeColor()
    this.loadProgramConfig()
  },
  
  async onShow() {
    // 页面显示时重新获取主题色，确保主题色同步
    await this.initThemeColor()
  },
  
  computed: {
    // 动态主题色
    primaryColor() {
      return getThemePrimaryColor(this.themeColor)
    },
    
    themeColorStyles() {
      return this.setThemeColorVariables(this.primaryColor)
    },
    

    
    // 处理底部文字换行显示
    mineAdTextLines() {
      if (this.programConfig.mineAdText) {
        return this.programConfig.mineAdText.split('\n')
      }
      return []
    }
  },
  
  methods: {
    // 初始化主题色
    async initThemeColor() {
      try {
        // 获取主题色配置
        const themeColor = await getThemeColorFromGlobal()
        
        // 判断是否为异步主题色（数字字符串表示需要从服务器获取）
        if (/^\d+$/.test(themeColor)) {
          // 异步获取主题色
          this.themeColor = themeColor
          console.log('异步获取主题色 - 联系客服页面:', themeColor)
        } else {
          // 同步获取主题色（直接使用颜色值）
          this.themeColor = themeColor
          console.log('同步获取主题色 - 联系客服页面:', themeColor)
        }
      } catch (error) {
        console.error('联系客服页面主题色初始化失败:', error)
        // 使用默认主题色
        this.themeColor = '1'
      }
    },
    
    // 设置主题色变量
    setThemeColorVariables(color) {
      const rgb = this.hexToRgb(color)
      const lightColor = this.lightenColor(color, 0.9)
      
      return {
        primaryColor: color,
        primaryColorLight: this.lightenColor(color, 0.8),
        primaryColorShadow: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`,
        primaryColorBorder: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        primaryColorBgLight: lightColor,
        backgroundGradient: `linear-gradient(180deg, ${this.lightenColor(color, 0.95)} 0%, ${this.lightenColor(color, 0.92)} 100%)`,
        cardShadow: `0 8rpx 32rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.08)`,
        cardBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        serviceHeaderBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        serviceAvatarBorder: `2rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.2)`,
        actionBtnBorder: `2rpx solid ${color}`,
        methodItemBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        methodActionBg: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.05)`,
        methodActionBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        faqItemBorder: `1rpx solid rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
        containerBg: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.03)`,
        primaryTextColor: '#FFFFFF',
        secondaryBtnColor: color,
        secondaryBtnBg: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.05)`,
        primaryBtnShadow: `0 4rpx 16rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`,
        secondaryBtnShadow: `0 2rpx 8rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.15)`
      }
    },
    
    // 十六进制颜色转RGB
    hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : { r: 74, g: 144, b: 226 }
    },
    
    // 颜色变浅
    lightenColor(color, amount) {
      const rgb = this.hexToRgb(color)
      const r = Math.round(rgb.r + (255 - rgb.r) * amount)
      const g = Math.round(rgb.g + (255 - rgb.g) * amount)
      const b = Math.round(rgb.b + (255 - rgb.b) * amount)
      return `rgb(${r}, ${g}, ${b})`
    },
    
    // 加载小程序配置
    async loadProgramConfig() {
      try {
        // 使用 App.vue 中的实时获取配置方法
        const app = getApp()
        const config = await app.getProgramConfig()
        
        if (config) {
          this.programConfig = {
            aboutLogo: config.aboutLogo || '',
            servicePhone: config.servicePhone || '',
            serviceEmail: config.serviceEmail || '',
            serviceWechatId: config.serviceWechatId || '',
            serviceQq: config.serviceQq || '',
            serviceWechatQr: config.serviceWechatQr || '',
            serviceFaq: config.serviceFaq || '',
            mineAdText: config.mineAdText || ''
          }
          
          // 初始化FAQ列表
          this.initFaqList()
        }
      } catch (error) {
        console.error('获取小程序配置失败:', error)
      }
    },
    
    // 获取图片URL
    getImageUrl(imagePath) {
      if (!imagePath) return ''
      
      // 如果已经是完整的URL，直接返回
      if (imagePath.startsWith('http')) {
        return imagePath
      }
      
      // 七牛云存储，直接使用完整URL，不需要拼接服务器地址
      // 移除/profile/路径的处理
      return imagePath
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 电话咨询 - 复制号码并跳转拨号
    callPhone() {
      if (!this.programConfig.servicePhone) {
        uni.showToast({
          title: '客服电话未配置',
          icon: 'none'
        });
        return;
      }
      
      // 先复制电话号码
      uni.setClipboardData({
        data: this.programConfig.servicePhone,
        success: () => {
          uni.showToast({
            title: '电话号码已复制',
            icon: 'success',
            duration: 1500
          });
          
          // 延迟跳转到拨号页面
          setTimeout(() => {
            uni.makePhoneCall({
              phoneNumber: this.programConfig.servicePhone,
              fail: () => {
                uni.showToast({
                  title: '拨号失败',
                  icon: 'none'
                });
              }
            });
          }, 1000);
        },
        fail: () => {
          // 复制失败时直接拨号
          uni.makePhoneCall({
            phoneNumber: this.programConfig.servicePhone,
            fail: () => {
              uni.showToast({
                title: '拨号失败',
                icon: 'none'
              });
            }
          });
        }
      });
    },
    
    // 复制电话号码
    copyPhone() {
      if (!this.programConfig.servicePhone) {
        uni.showToast({
          title: '客服电话未配置',
          icon: 'none'
        });
        return;
      }
      
      uni.setClipboardData({
        data: this.programConfig.servicePhone,
        success: () => {
          uni.showToast({
            title: '电话号码已复制',
            icon: 'success'
          });
        }
      });
    },
    
    // 复制邮箱
    copyEmail() {
      if (!this.programConfig.serviceEmail) {
        uni.showToast({
          title: '客服邮箱未配置',
          icon: 'none'
        });
        return;
      }
      
      uni.setClipboardData({
        data: this.programConfig.serviceEmail,
        success: () => {
          uni.showToast({
            title: '邮箱地址已复制',
            icon: 'success'
          });
        }
      });
    },
    
    // 复制微信号
    copyWechatId() {
      if (!this.programConfig.serviceWechatId) {
        uni.showToast({
          title: '微信客服未配置',
          icon: 'none'
        });
        return;
      }
      
      uni.setClipboardData({
        data: this.programConfig.serviceWechatId,
        success: () => {
          uni.showToast({
            title: '微信号已复制',
            icon: 'success'
          });
        }
      });
    },
    
    // 预览微信二维码
    previewWechatQr() {
      if (!this.programConfig.serviceWechatQr) {
        uni.showToast({
          title: '微信二维码未配置',
          icon: 'none'
        });
        return;
      }
      
      const imageUrl = this.getImageUrl(this.programConfig.serviceWechatQr);
      uni.previewImage({
        urls: [imageUrl],
        current: imageUrl
      });
    },
    
    // 复制QQ号
    copyQQ() {
      if (!this.programConfig.serviceQq) {
        uni.showToast({
          title: 'QQ客服未配置',
          icon: 'none'
        });
        return;
      }
      
      uni.setClipboardData({
        data: this.programConfig.serviceQq,
        success: () => {
          uni.showToast({
            title: 'QQ号已复制',
            icon: 'success'
          });
        }
      });
    },
    
    // 初始化FAQ列表
    initFaqList() {
      if (this.programConfig.serviceFaq) {
        try {
          const configFaqs = JSON.parse(this.programConfig.serviceFaq)
          if (Array.isArray(configFaqs) && configFaqs.length > 0) {
            this.displayFaqList = configFaqs.map(faq => ({
              ...faq,
              expanded: false
            }))
          } else {
            this.displayFaqList = this.defaultFaqList
          }
        } catch (error) {
          console.error('解析常见问题配置失败:', error)
          this.displayFaqList = this.defaultFaqList
        }
      } else {
        this.displayFaqList = this.defaultFaqList
      }
    },
    
    // 切换FAQ展开状态
    toggleFaq(index) {
      if (this.displayFaqList[index]) {
        this.displayFaqList[index].expanded = !this.displayFaqList[index].expanded
        // 强制更新视图
        this.$forceUpdate()
      }
    },
    

  }
};
</script>

<style lang="scss" scoped>
.contact-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* 内容滚动区域 */
.content-scroll {
  flex: 1;
  padding: 16rpx 32rpx 0;
}

/* 信息卡片样式 */
.info-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 16rpx;
  padding: 32rpx 24rpx;
}

/* 卡片头部 */
.card-header {
  margin-bottom: 32rpx;
}

.card-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}

.card-subtitle {
  font-size: 28rpx;
  color: #8A8A8A;
  display: block;
}

/* 客服信息样式 */
.service-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 24rpx;
  border-radius: 16rpx;
}

.service-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 16rpx;
  margin-right: 20rpx;
}

.service-info {
  flex: 1;
}

.service-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}

.service-status {
  font-size: 24rpx;
  display: block;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.service-status.online {
  color: #4A90E2;
}

.service-time {
  font-size: 22rpx;
  color: #8A8A8A;
  display: block;
}

.service-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 16rpx;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  border-radius: 12rpx;
  font-size: 28rpx;
  background: #FFFFFF;
  transition: all 0.3s ease;
}

.action-btn.primary {
  color: #FFFFFF;
}

.btn-icon {
  margin-right: 12rpx;
  font-size: 28rpx;
}

.btn-text {
  font-size: 28rpx;
}

/* 联系方式样式 */
.method-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  margin-bottom: 16rpx;
  border-radius: 16rpx;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.method-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.1), transparent);
  transition: left 0.6s ease;
}

.method-item:hover::before {
  left: 100%;
}

.method-item:hover {
  transform: translateX(4rpx);
  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.1);
}

.method-item:active {
  transform: translateX(2rpx);
}

.method-item:last-child {
  margin-bottom: 0;
}

.method-icon {
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(74, 144, 226, 0.1);
  border-radius: 16rpx;
  margin-right: 20rpx;
  border: 1rpx solid rgba(74, 144, 226, 0.2);
}

.icon {
  font-size: 32rpx;
}

.method-info {
  flex: 1;
}

.method-label {
  font-size: 30rpx;
  color: #1A1A1A;
  font-weight: 600;
  display: block;
  margin-bottom: 8rpx;
}

.method-value {
  font-size: 28rpx;
  display: block;
  margin-bottom: 8rpx;
  font-weight: 500;
}

.method-desc {
  font-size: 24rpx;
  color: #8A8A8A;
  display: block;
}

.method-action {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
}

.action-text {
  font-size: 26rpx;
  font-weight: 500;
}

/* FAQ样式 */
.faq-list {
  padding: 0;
}

.faq-item {
  margin-bottom: 16rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  transition: all 0.3s ease;
  transform: scale(1);
}

.faq-item:hover {
  transform: scale(1.02);
  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.08);
}

.faq-item:active {
  transform: scale(0.98);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
}

.question-text {
  font-size: 30rpx;
  color: #1A1A1A;
  flex: 1;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.5rpx;
}

.expand-icon {
  font-size: 24rpx;
  transition: transform 0.3s ease;
  font-weight: 500;
}

.expand-icon.expanded {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 20rpx 24rpx 24rpx;
  background: #ffffff;
  margin: 0 12rpx;
  border-radius: 12rpx;
  border: 1rpx solid #f0f0f0;
}

.answer-text {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.8;
  letter-spacing: 0.5rpx;
  word-spacing: 2rpx;
}

/* 反馈表单样式 */
.feedback-form {
  padding: 0;
}

.feedback-input {
  width: 100%;
  min-height: 180rpx;
  padding: 20rpx;
  border: 1rpx solid rgba(74, 144, 226, 0.2);
  border-radius: 16rpx;
  font-size: 28rpx;
  color: #1A1A1A;
  background: #ffffff;
  box-sizing: border-box;
  transition: all 0.3s ease;
  transform: scale(1);
}

.feedback-input:focus {
  border-color: #4A90E2;
  outline: none;
  transform: scale(1.01);
  box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.1);
}

.input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.char-count {
  font-size: 24rpx;
  color: #8A8A8A;
}

.submit-btn {
  padding: 16rpx 32rpx;
  background: #4A90E2;
  color: #ffffff;
  border-radius: 12rpx;
  border: none;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  transform: scale(1);
  position: relative;
  overflow: hidden;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #3A80D2;
  transform: scale(1.02);
  box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.3);
}

.submit-btn:hover::before {
  width: 400rpx;
  height: 400rpx;
}

.submit-btn:active {
  background: #2A70C2;
  transform: scale(0.98);
}

.submit-btn:disabled {
  background: #A0C0E8;
}

/* 底部信息样式 */
.footer-info {
  text-align: center;
  padding: 24rpx 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  border: 1rpx solid #e9ecef;
}

.footer-text {
  font-size: 22rpx;
  color: #6c757d;
  line-height: 1.5;
  display: block;
  margin-bottom: 6rpx;
}

/* 底部间距 */
.bottom-space {
  height: 40rpx;
}
</style>